<template>
<div v-if="showFrom">
  <el-card :body-style="{padding:'0px'}">
    <el-image
          style="height: 165px;width: 100%;"
          :src=user.backgroundImage>
      </el-image>
<!--用户信息展示-->
    <div>
      <el-row>
        <el-col span="8" id="img_head">
          <el-avatar :size="100" :src="user.icon" @error="errorHandler"></el-avatar>
        </el-col>
        <el-col span="12">
          <el-descriptions class="margin-top"  :column="2" size="mini">
            <el-descriptions-item label="昵称">{{user.nickName}}</el-descriptions-item>
            <el-descriptions-item label="性别">{{UserGender}}<i :class=Gender></i></el-descriptions-item>
            <el-descriptions-item label="居住地">{{user.province}}</el-descriptions-item>
            <el-descriptions-item label="备注">
              <el-tag size="small">{{user.remark}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="粉丝"><el-button  size="mini">{{20}}</el-button></el-descriptions-item>
            <el-descriptions-item label="关注"><el-button  size="mini">{{40}}</el-button></el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col span="4" v-if="location != '4-1'">
          <el-button type="primary" round v-if="!value"  @click="concern()">关注</el-button>
          <el-button type="info" round  v-if="value" @click="concern()">已关注</el-button>
        </el-col>
      </el-row>
    </div>
<!--标签选择-->
    <el-row>
       <el-menu :default-active=activeIndex class="el-menu-demo" mode="horizontal" >
         <el-col span="8">
           <el-menu-item index="1-1-2" @click="oneself_home('热门','1-1-2')">热门</el-menu-item>
         </el-col>
         <el-col span="8">
           <el-menu-item index="1-1-1" @click="oneself_home('全部','1-1-1')">微博</el-menu-item>
         </el-col>
         <el-col span="8">
           <el-menu-item index="1-1-3" @click="oneself_photo('相册')">相册</el-menu-item>
         </el-col>
       </el-menu>
     </el-row>
  </el-card>
  <!--用于展示用户相册-->
  <router-view v-if="activeIndex === '1-1-3'"/>

  <!--用户博客展示-->
  <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto;padding-left: 0px;
    margin-top: 0px;" v-else="">
    <li v-for="i in blogIDList" class="infinite-list-item">
      <router-view :blogID="i"/>
    </li>
  </ul>


</div>
</template>

<script>
import img from '@/assets/oneself_backguand.jpg'
import {getUser} from "@/api/api";
import {getSession, getToken,setSession} from "@/utils/Token";
import {getBlogs,concern} from "@/api/api";


export default {
  name: "oneself_home",
  props:['blogIDList'],
  data(){
    return{
      /*解决数据与请求不一致*/
      showFrom: false,
      url: img,
      activeIndex:'1-1-1',
      UserGender:'男',
      Gender:"el-icon-male",
      user:{},
      blogIDList:[],
      /*点击关注*/
      value:true,
      /*防止用户多次点击*/

      location:getSession('group_index')
    };
  },
  methods:{
    /*点关注*/
    concern(){
        concern(this.user.id).then((res)=>{
          if(res.data.status === 200){
            this.value = !this.value;
          }
        })
    },
/*头像加载失败*/
    errorHandler() {
      return true;
    },
/*用户博客列表展示*/
    oneself_home(str,index){
      setSession('activeIndex',index);
      setSession('title',getSession('title1')+'-'+str);
      if(this.$route.path!='/oneself'){
        this.$router.replace('/oneself');
      }
      this.activeIndex = index;
    },
/*用户相册展示*/
    oneself_photo(str){
      setSession('activeIndex','1-1-3');
      setSession('title',getSession('title1')+'-'+str);
      if(this.$route.path!='/oneself/photo') {
        this.$router.replace('/oneself/photo');
      }
      this.activeIndex = '1-1-3';
    },
  },
  /*创建时请求用户信息*/
  created() {
    let userId
    if(getSession('index') != 4){
      userId = getSession('restUser');
    }else {
      userId = getToken('userId');
    }
    getUser(userId).then((res)=>{
      if(res.data.status===200){
        this.user = res.data.data;
        this.value = this.user.concern;
        if(getSession('index') != 4) {
          getBlogs('个人-主页', userId).then((res) => {
            if (res.data.status === 200) {
              this.blogIDList = res.data.data;
              this.showFrom = true
            }
          })
        }else {
            this.showFrom = true
        }
        if(this.user.gender===1){
          this.UserGender = '女';
          this.Gender = 'el-icon-female';
        }
      }
    })
  },
}
</script>

<style >
/*设置头像*/
#img_head{
  position: relative;
  top: -40px !important;
}

/*设置用户背景图片*/
#img_head img{
  width: 100%;
  height: 100%;
}
</style>